<template>
	<view class="content">
		<view class="text-area">
			<!-- <text class="title" @click="count++">{{count}}</text> -->
		</view>
		<!-- 使用子组件 -->
		<Myswiper :swiperArr='swiperArr' @myevent='getdata'></Myswiper>
		<view class="">
			测试字体大小
		</view>
		<!-- 遍历数据 -->
		<view class="">
			<view class="" v-for="item in nameArr" :key='item.id' @click="gotodetail(item.id)">
				{{item.id}}--{{item.name}}
			</view>
		</view>
		<!-- 在uniapp 中使用vuex -->
		<!-- 使用仓库数据方式1  -->
			<!-- <view>store中的数据: {{count}}</view> -->
		<!-- 使用仓库数据方式2 -->
		<view>store中的数据: {{$store.state.count}}</view>
		<view>store中的数据getters: {{$store.getters.doubleCount}}</view>
		<view class="">
			<button @click="addCountFn">count+10</button>
		</view>
		
	</view>
</template>
<script>
	//01: uniapp 中既可以使用小程序的生命周期函数也可以使用vue 生命周期函数
	//02: uniapp 使用的是小程序的组件 viwe image
	//03: unaipp 使用了小程序的api 和vue语法

	// 总结: 学好uniapp 只需要记住 uniapp 使用的是vue语法+ 小程序的api 和组件
	import Myswiper from '@/components/myswiper/myswiper.vue';
	import img1 from '@/static/image/11.jpeg';
	import img2 from '@/static/image/22.jpeg';
	import img3 from '@/static/image/33.jpeg';
	// 引入store 方式
	// import store from '@/store/index.js';
	// console.log('store',store);
	// 获取整个应用的实例
	const app = getApp()
	
	export default {
		data() {
			return {
				// count:0 ,
				swiperArr: [img1, img2, img3],
					
				nameArr: [{
						id: 1,
						name: '玉麒麟-卢俊义'
					},
					{
						id: 2,
						name: '豹子头-林冲'
					},
					{
						id: 3,
						name: '行者-武松'
					}

				]
			}
		},
		onLoad() {
			// console.log('onLoad');
			// console.log('app',app.globalData.girlArr);
			// app.globalData.girlArr.push('马超')
		},
		mounted() {
			console.log('mounted');
			console.log(this);
		},
		// 下拉刷新事件
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		methods: {
			getdata(data) {
				console.log(data);
			},
			gotodetail(id){
				console.log(id);
				uni.navigateTo({
					url:'/pages/detail/detail?id='+id
				})
			},
			addCountFn(){
				this.$store.commit('addCount',10)	
			}
		},
		components: {
			Myswiper
		}
	}
</script>

<style scoped>
	.title {
		background-color: red;
	}
</style>
